<template>
  <div class="Policy">
    <x-header v-show="!isWeChar">
      <div slot="default" class="common__header--title">保单查询</div>
      <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
    </x-header>
    <div class="policy_inputDiv">
      <x-input v-model="queryData.policyNo" :min="20" :max="23" icon-type="success" placeholder="请输入保单号" required>
        <img slot="label" style="padding-right:10px;display:block;" src="~assets/x3/ico/income.png" width="26">
      </x-input>

      <x-input v-show="isName" v-model="queryData.findData" :min="StrLenth.userNameMin" :max="StrLenth.userNameMax" icon-type="success" placeholder="请输入真实姓名" required>
        <img slot="label" @click="isName = !isName" style="padding-right:10px;display:block;" src="~assets/x3/ico/ico-input-header-list.png" width="26">
      </x-input>
      <x-input v-show="!isName" v-model="queryData.findData" :min="2" :max="20" icon-type="success" placeholder="请输入证件号码" required>
        <img slot="label" @click="isName = !isName" style="padding-right:10px;display:block;" src="~assets/x3/ico/icon-card-list.png" width="26">
      </x-input>
      <x-input v-model="queryData.valCode" :min="3" :max="4" title="图形码" placeholder="请输入图形码" required>
        <img slot="label" style="padding-right:16px;padding-top:5px;display:block;" src="~assets/x3/ico/ico-input-img_code.png" width="20">
        <span slot="right" class="img__code--change" @click="changeImgCode()">换一张</span>
        <img slot="right" class="img__code" :src="imgCodeSrc" @click="changeImgCode()">
      </x-input>
    </div>
    <div v-if="haveError" class="register_errorMsg">
      <badge text="!"></badge> {{errorMessage}}
    </div>
    <x-button @click.native="findOrder" text="查询" type="primary" class="policy_find"></x-button>
    <div class="login_change">
      <span @click="changeLoginWay">登录账户查询</span>&nbsp
    </div>

  </div>
</template>
<script>
import { XHeader, XInput, XButton, Badge, Group } from "vux";
import { RouteUrl, Mutations, SaveName, StrLenth } from "src/common/const";
import { RequestUrl } from "src/common/url";
import { mapState, mapActions } from "vuex";
export default {
  components: {
    XHeader,
    XInput,
    XButton,
    Badge,
    Group
  },
  data() {
    return {
      StrLenth: {}, //字符长度常量
      haveError: false,
      errorMessage: "",
      imgCodeSrc: RequestUrl.GET_VALIDATE_CODE,
      isName: true,//是否名称录入
      queryData: {
        TYPE: "FORM",
        policyNo: "",
        findData: "",
        valCode: "",
        type: ""
      }
    };
  },
  computed: mapState({
    isWeChar: "isWeChar"
  }),
  methods: {
    findOrder() {
      let _this = this;
      $(".weui-input").focus();
      $(".weui-input").blur();
      if (
        this.queryData.policyNo != "" &&
        this.queryData.findData != "" &&
        this.queryData.valCode != ""
      ) {
        if (this.isName) {
          this.queryData.type = "name";
        } else {
          this.queryData.type = "";
        }
        _this.$http.post(RequestUrl.FIND_ORDER_LIST, _this.queryData)
          .then(function (res) {
            if (res.success == false) {
              _this.haveError = true;
              _this.errorMessage = res.result;
            } else {
              let findData = {
                isFind: true,
                findData: res.result
              };
              _this.$common.storeCommit(
                _this,
                Mutations.SET_FIND_DATA,
                findData
              );
              _this.$common.goUrl(_this, RouteUrl.ORDER);
              sessionStorage[SaveName.IS_ORDER_FIND] = "T";
            }
            _this.changeImgCode();
          });
      }
    },
    changeLoginWay() {
      this.$common.goUrl(this, RouteUrl.LOGIN);
    },
    goBack() {
      this.$common.goBack(this);
    },
    changeImgCode() {
      this.imgCodeSrc = RequestUrl.GET_VALIDATE_CODE + "?a=" + Math.random();
    }
  },
  mounted() {
    document.title = '保单查询';
    this.StrLenth = StrLenth; //字符长度常量
    this.$init.subPageInit(this);
  }
};
</script>
<style lang="scss" scoped>
//input区域
.policy_inputDiv {
  margin: 15px auto;
  width: 95%;
  height: auto;
  border-radius: 5px;
  background-color: white;
  .weui-cell {
    border-top: 1px solid #efefef;
  }
  .weui-cell:before {
    border-top: 0px;
  }
}

.policy_find {
  width: 95%;
  margin-top: 20px;
}

.login_change {
  height: 50px;
  line-height: 50px;
  padding-left: 10px;
  color: #C8161D;
  font-size: 14px;
}

.register_errorMsg {
  color: red;
  font-size: 14px;
  margin-left: 10px;
  margin-bottom: -20px;
  line-height: 40px;
}

//图形码
.img__code {
  width: 80px;
  height: 31px;
  margin-left: 3px;
  vertical-align: middle;
}

//换一张图形码
.img__code--change {
  margin-left: 3px;
  vertical-align: middle;
  font-size: 14px;
}
</style>
